<script setup lang="ts">
import {h} from 'vue'
import { Welcome,Prompts, type PromptsProps, } from 'ant-design-x-vue';
import { AppstoreAddOutlined,ContainerOutlined } from '@ant-design/icons-vue';

const props = defineProps({
	moreTools: { type:Boolean, default:true, required: false},
	welcomeSource: {type:String, default:'chat', required: false},
})

/* emits */
const emit = defineEmits(['textSelected'])

/* data */
//prompts样式设置
const promptsStyle={
	// item: {
	// 	flex: 'none',
	// 	backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
	// 	border: 0,
	// },
	// subItem: {
	// 	background: 'rgba(255,255,255,0.45)',
	// 	border: '1px solid #FFF',
	// 	paddingBlock: '8px',
	// 	paddingInline: '12px',
	// },
}
const title=ref('')
//prompts数据结构
const promptsList = ref<PromptsProps['items']> ( [

])
const moreToolsList:PromptsProps['items'] =  [
	{
		key: '/chat/toolsCenter',
		icon:  h(AppstoreAddOutlined, {style:{ color: '#5A54F9' }} ),
		description: '打开工具集',
	},
	{
		key: '/chat/myReport',
		icon:  h(ContainerOutlined, {style:{ color: '#FF4D4F' }} ),
		description: '下载报告',
	},
]
//methods
const {pushPath} = usePath()

const wordItemClick = (info: any) =>{
	let text = info.data?.description||' ';
	let tmp = text.split(' ')
	text = tmp[tmp.length-1]
	emit('textSelected', text);
}
const toolItemClick = (info: any) =>{
	pushPath(info.data.key)
}
apiAiFetch.welcomeInfo(props.welcomeSource, (body:any)=>{
	//console.log(body);
	title.value = body.opening_statement
	if(body.suggested_questions && body.suggested_questions.length > 0 && promptsList.value){
		for(let i= body.suggested_questions.length - 1;i>=0;i--){
			promptsList.value.unshift({
				key:'key'+i, description:body.suggested_questions[i],
			});
		}
	}

})
</script>

<template>
	<div class="welcome-screen">
		<Welcome v-if="title!==''" :title="title" description="基于Deepseek的奇葩助手已经上线，请把你的任务交给我吧主人~" class="bg-welcome">
			<template #icon>
				<img src="/img/avatar/robot.svg" alt=""/>
			</template>
		</Welcome>
		<Prompts title="☕️ 你可以这样问：" wrap :items="promptsList" :styles="promptsStyle" :on-item-click="wordItemClick" />
		<a-divider v-if="moreTools"></a-divider>
		<Prompts v-if="moreTools" :items="moreToolsList" :on-item-click="toolItemClick" />
	</div>
</template>

<style scoped lang="scss">
.welcome-screen{display:flex; flex-direction:column; overflow-x: hidden; overflow-y: auto;padding:16px 16px 6px;}
.ant-welcome{
	margin-bottom:20px;
	:deep(h4.ant-typography){color:var(--font-main-color);}
}
:deep(.ant-welcome-extra .ant-btn.ant-btn-round){
	padding-inline-start:0;padding-inline-end:0; width:32px;
}
.ant-divider-horizontal{margin:20px 0;}
@media screen and (min-width: 992px) {
	.welcome-screen{padding-top:15vh}
}
:deep(.ant-welcome-description){color:var(--font-base-color)}
:deep(.ant-prompts .ant-prompts-list ){overflow-x:hidden;}
.bg-welcome{
	background: var(--bg-welcome-style); border-radius: 8px; margin-bottom: 20px;
}
</style>